<!--  -->
<template>
<div class='apply-page'>
  <c-title text="赛事详情" :hide="false" ></c-title>
  <div class="apply-main">
    <div class="apply-main-top">
      <c-myswipe :style="{ height: fun.getPhoneEnv() == 3 ? '375px' : '100vw' }" :pagination-visible="false" :slides="applyInfo.thumb_url" :repeating="false" :auto="0" class="banner_pcStyle">
          <div v-if="!fun.isTextEmpty(applyInfo.goods_video_link)"  style="background:#000">
            <video
              id="goods_vedio"
              style="width: 100%; height: 21.5625rem;object-fit: scale-down"
              :poster="applyInfo.video_image_link"
              :src="applyInfo.goods_video_link"
              controls
              webkit-playsinline="true"
              playsinline="true"
              x5-playsinline="true"
              x-webkit-airplay="true"
              x5-video-ignore-metadata="true"
              width="100%"
              height="100%"
            >
              <source :src="applyInfo.goods_video_link" />
            </video>
          </div>
          <div v-if="!applyInfo.thumb_url || applyInfo.thumb_url == null || applyInfo.thumb_url.length == 0">
            <img :src="applyInfo.thumb_link" width="100%" />
          </div>

          <div v-for="(ithumb, index) in applyInfo.thumb_url" class="swiper-item" :key="index">
            <template v-if="ithumb">
              <img :src="ithumb.thumb_link" width="100%" />
              <div class="number-box">{{ index + 1 }} / {{ applyInfo && applyInfo.thumb_url.length }}</div>
            </template>
          </div>

        </c-myswipe>
    </div>
    <div class="apply-content">
      <div class="introduce">
        <div class="introduce-head">
          <h3>{{applyInfo.title}}</h3>
          <p>截止时间：{{applyInfo.end_time}}</p>
        </div>
        <div class="introduce-content flex">
          <div class="introduce-item">
            <h3>¥{{applyInfo.price}}</h3>
            <p>报名费用</p>
          </div>
          <div class="introduce-item">
            <div v-if="endTime">
              <van-count-down :time="endTime">
                <template #default="timeData">
                  <h3>{{ timeData.days }}天{{ timeData.hours }}小时{{ timeData.minutes }}分{{ timeData.seconds }}秒</h3>
                </template>
            </van-count-down>
            </div>
            <h3 v-else>0</h3>
            <p>剩余时间</p>
          </div>
          <div class="introduce-item" v-if="applyInfo.add_price">
            <h3>¥{{applyInfo.add_price}}</h3>
            <p>入选增值服务费</p>
          </div>
          <div class="introduce-item">
            <h3>{{applyInfo.count_apply}}/{{applyInfo.limit_num}}</h3>
            <p>报名人数</p>
          </div>
        </div>
      </div>
      <div class="introduce-desc">
        <div class="head-desc">
          赛事介绍
        </div>
        <div class="desc-details" v-html="applyInfo.content">

        </div>
      </div>
    </div>
    <div class="mb100"></div>
  </div>
  <div class="footer-btn" >
    <van-goods-action :style="iPnoneBottomBol ? 'padding-bottom: 34px;' : ''">
      <van-goods-action-icon icon="chat-o" text="客服" @click="onService" />
      <van-goods-action-button
        type="danger"
        text="我要投稿"
        color="var(--themeBaseColor)"
        v-if="applyInfo.activity_status == 2 && applyInfo.count_apply < applyInfo.limit_num"
        @click.stop="applyOn(applyInfo.title,applyInfo.id)"
      />
      <van-goods-action-button
        type="danger"
        text="活动已满"
        color="#AAAAB3"
        v-if="applyInfo.activity_status == 2 && applyInfo.count_apply == applyInfo.limit_num"
      />
      <van-goods-action-button
        type="danger"
        text="未开始"
        color="#AAAAB3"
        v-if="applyInfo.activity_status == 1"
      />

      <van-goods-action-button
        type="danger"
        text="已结束"
        color="#AAAAB3"
        v-if="applyInfo.activity_status == 3"
      />
    </van-goods-action>
    
  </div>
  <div class="backUp" @click="posterClick">
    <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/bc_eweima.png" />
  </div>
  <!--海报-->
  <yz-goodsposter v-model="posterShow" :posterData="isFrontCanvas ? posterImg : {}" :defaultImg="!isFrontCanvas ? posterImg : ''" :gid="goodsId" :goodstype="true">
  </yz-goodsposter>
  <!-- 客服插件-->
  <yz-service v-model="serviceShow" :url="cservice" :mobile="serviceMobile" :qr="serviceQRcode"></yz-service>
  
</div>
</template>

<script>
import applyDetails_controller from './applyDetails_controller';
export default applyDetails_controller;
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.mb100 {
  height: 6.25rem;
  clear: both;
}
.swiper-item {
  position: relative;
}
/* 海报按钮 */
.backUp {
  position: fixed;
  top: 65%;
  transform: translateY(-50%);
  right: 0.625rem;
  z-index: 99;

  img {
    width: 2.1875rem;
    height: 2.1875rem;
  }
}
.number-box {
  font-size: 0.6875rem;
  line-height: 0.6875rem;
  color: #FFFFFF;
  padding:0.25rem 0.5625rem;
  border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
  background: rgba($color: #000000, $alpha: 0.1);
  position: absolute;
  right:0.75rem;
  bottom:0.875rem;
  width: auto;
  left:auto;
}
.apply-main ::v-deep .desc-details img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
.pcStyle  .footer-btn ::v-deep .van-goods-action{
  width:23.4375rem;
  margin:auto;
}
.apply-main {
  .apply-main-top {
    position: relative;
    img {
      width:100%;
      height:auto;
      display: block;
    }
    .top-tag {
      font-size: 0.6875rem;
      line-height: 0.6875rem;
      color: #FFFFFF;
      padding:0.25rem 0.5625rem;
      border-radius: 1.875rem 1.875rem 1.875rem 1.875rem;
      background: rgba($color: #000000, $alpha: 0.1);
      position: absolute;
      right:0.75rem;
      bottom:0.875rem;
    }
  }
  .apply-content {
    margin:0.6875rem 0.75rem 0 0.75rem;
    .introduce {
      background: #FFFFFF;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      padding:0.8125rem 0.75rem;
      .introduce-head {
        text-align: left;
        h3 {
          font-weight: 500;
          font-size: 1rem;
          color: #00001C;
          padding:0 0 0.375rem 0;
        }
        p {
          font-weight: 400;
          font-size: 0.75rem;
          color: #999999;
        }
      }
      .introduce-content {
        margin:0.625rem 0 0 0;
        background: #FBFBFB;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        flex-wrap: wrap;
        padding:1.125rem 0;
        .introduce-item {
          flex:0 0 50%;
          position: relative;
          &:nth-child(1) {
            margin:0 0 1.25rem 0;
            &::after {
              content: '';
              width: 0.0625rem;
              height: 1.6875rem;
              position: absolute;
              background: #D6D6DC;
              right:0;
              top:50%;
              transform: translate(0, -50%);
            }
          }
          &:nth-child(3) {
            &::after {
              content: '';
              width: 0.0625rem;
              height: 1.6875rem;
              position: absolute;
              background: #D6D6DC;
              right:0;
              top:50%;
              transform: translate(0, -50%);
            }
          }
          h3 {
            font-weight: bold;
            font-size: 1rem;
            color: #F15353;
            padding:0 0 0.3125rem 0;
          }
          p {
            font-weight: 400;
            font-size: 0.75rem;
            color: #6E6E79;
          }
        }
      }
      
    }
    .introduce-desc {
      background: #FFFFFF;
      border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
      padding:0.9375rem 0.75rem 0.75rem 0.75rem;
      margin:0.625rem 0 0 0;
      .head-desc {
        font-weight: 500;
        font-size: 0.9375rem;
        color: #00001C;
        text-align: left;
        padding:0 0 0.625rem 0;
      }
    }
  }
}
</style>